<template>
	<view class="dialog-wrapper">
		<xl-popup
			ref="popup"
			direction="center"
			:before-close="beforeClose"
			:modal-close="modalClose"
			:size="width"
			:border-radius="10"
			:padding="0"
			:background="background"
			@close="onClose"
			@closed="onClosed"
			@open="onOpen"
			@opened="onOpened"
		>
			<view class="xl-dialog">
				<view class="xl-dialog-header" v-if="title">
					<text class="xl-dialog-title">{{ title }}</text>
				</view>

				<view class="xl-dialog-container" :style="{ padding: $xl.parseUnit(padding) }">
					<view class="xl-dialog-message">
						<view v-if="content">{{content}}</view>
						<slot v-else></slot>
					</view>
				</view>
				
				<view v-if="showConfirm" class="xl-dialog-confirm">
					<button
						v-if="showCancelButton"
						class="confirm-button is-cancel"
						plain
						size="small"
						@tap="closeConfirm('cancel')"
					>
						{{ cancelButtonText }}
					</button>
					<button
						v-if="showConfirmButton"
						class="confirm-button is-confirm"
						:open-type="openType"
						@getphonenumber="getphonenumber"
						@getuserinfo="getuserinfo"
						plain
						size="small"
						:style="{color: confirmColor}"
						@tap="closeConfirm('confirm')"
					>
						{{ confirmButtonText }}
					</button>
				</view>

				<view v-if="showCloseButton" class="xl-dialog-close" @tap="close">
					<xl-icon name="xl-close-round" color="#fff" size="36"/>
				</view>
			</view>
		</xl-popup>
	</view>
</template>

<script setup>
	import propsData from './props.js'
	const props = defineProps(propsData)
	
	// ref使用
	import { ref } from 'vue'
	const popup = ref()
	defineExpose({ open, close })
	
	const emits = defineEmits(['open', 'opened', 'close', 'closed', 'cancel', 'confirm', 'getphonenumber', 'getuserinfo'])
	
	let content = ref('')
	function open(tip = ''){
		content.value = tip
		popup.value.open();
		emits("open");
	}
	function close() {
		popup.value.close();
		emits("close", "close");
	}
	function onOpen() {
		emits("open");
	}
	function onOpened() {
		emits("opened");
	}
	function onClose() {
		emits("close");
	}
	function onClosed() {
		emits("closed");
	}
	function closeConfirm(type){
		popup.value.close();
		if(type == 'cancel'){
			emits("cancel");
		}else{
			emits("confirm");
		}
	}
	// 下面为对接uniapp官方按钮开放能力事件回调的对接
	function getphonenumber(res) {
	    emits("getphonenumber", res);
	}
	function getuserinfo(res) {
	    emits("getuserinfo", res);
	}
</script>

<style lang="scss" scoped>
	.dialog-wrapper {
		.xl-dialog {
			position: relative;
	
			&-header {
				position: relative;
				text-align: center;
				padding-top: 40rpx;
			}
	
			&-title {
				font-size: 38rpx;
				font-weight: bold;
			}
	
			&-container {
				position: relative;
				padding: 20rpx 40rpx 30rpx 40rpx;
			}
	
			&-message {
				text-align: center;
				font-size: 32rpx;
				color: #606266;
				line-height: 40rpx;
			}
			
			&-confirm {
				display: flex;
				width: 100%;
				
				
			
				.confirm-button {
					border: 0;
					border-radius: 0;
					flex: 1;
					position: relative;
					padding: 12rpx 0;
					font-size: 34rpx;
					border-top: 1rpx solid #f1f1ff;
			
					&.is-confirm {
						color: #409eff;
					}
			
					&:active {
						opacity: 0.8;
					}
					
					&:nth-child(2){
						border-left: 1rpx solid #f1f1ff;
					}
				}
			}
			
			&-close {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				height: 60rpx;
				width: 60rpx;
				position: absolute;
				bottom: -100rpx;
				left: calc(50% - 30rpx);
				color: #ddd;
				border-radius: 60rpx;
				font-size: 32rpx;
				text-align: center;
			}
		}
	}
</style>